<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<style type="text/css">
			.zcdiv{
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.divcenter{
				width: 60%;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				flex-direction: column;
				height: 60px;
				padding-left: 16px;
			}
			.divleft{
				width: 15%;
			}
			.divleft>img{
				width: 100%;
				border-radius: 50%;
			}
			.divright{
				width: 10%;
				height: 60px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;
			}
			.divright>img{
				width: 30px !important;
				height: 30px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">员工管理</h1>
		    <div class="hicon mui-icon-right-nav mui-pull-right" id="addemp">
		    	<img src="../../img/add.png"/>
		    </div>
		</header>
		<div class="mui-content">
		    <div class="mui-slider">
		        <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		            <a class="mui-control-item" href="#item1">正常</a>
		            <a class="mui-control-item" href="#item2">已删</a>
		        </div>
		        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
		        <div class="mui-slider-group">
		            <div id="item1" class="mui-slider-item mui-control-content mui-active">
		            	
		            </div>
		            <div id="item2" class="mui-slider-item mui-control-content">
		                
		            </div>
		        </div>
		    </div>
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var menttype = 1;
			window.onload = function(){
				document.getElementById("addemp").addEventListener("tap",function(e){
					gopage("addemp");
				})
				$('#item1').on('tap', '.mui-btn', function(event) {
					var elem = this;
					
					mui.confirm('确认删除该条记录？', '', ["取消","确认"], function(e) {
						if (e.index == 1) {
							console.log(elem.id);
							del(elem.id);
						} else {
							setTimeout(function() {
								$.swipeoutClose(li);
							}, 0);
						}
					});
				});
				
				getitem1();
				getitem2();
			}
			function getitem1(){
				var data = {
					url:"/api/employee/lst",
					data:{
						access_token:acctoken(),
						type : 1
					}
				}
				ajax(data,function(res){
					console.log(res);
					var str = '<ul class="mui-table-view">';
					for(var i = 0; i < res.data.data.length; i++){
		                str += '<li class="mui-table-view-cell">'+
								'<div class="mui-slider-right mui-disabled">'+
									'<a class="mui-btn mui-btn-red" id="'+res.data.data[i].id+'">删除</a>'+
								'</div>'+
								'<div class="mui-slider-handle" onclick="gosetemp('+res.data.data[i].id+')">'+
								'<div class="zcdiv">'+
		                    	'<div class="divleft">';
		                    	if(res.data.data[i].images&&res.data.data[i].images.path_name){
		                    		str += '<img src="'+res.data.data[i].images.path_name+'"/></div>';
		                    	}else{
		                    		str += '<img src="../../images/user-photo.png"/></div>';
		                    	}
		                    	str += '<div class="divcenter"><span id="">'+
		                    	res.data.data[i].username +'     '+ res.data.data[i].job_number +
		                    	'</span><span id="">'+
		                    	res.data.data[i].phone+
		                    	'</span></div>'+
								'</div></div></li>';
					}
					str += "</ul>"
					g("item1").innerHTML = str;
				})
			}
			function getitem2(){
				var data = {
					url:"/api/employee/lst",
					data:{
						access_token:acctoken(),
						type : 2
					}
				}
				ajax(data,function(res){
					var str = '<ul class="mui-table-view">';
					for(var i = 0; i < res.data.data.length; i++){
						str += '<li class="mui-table-view-cell"><div class="zcdiv">'+
		                    	'<div class="divleft">';
		                    	if(res.data.data[i].images&&res.data.data[i].images.path_name){
		                    		str += '<img src="'+res.data.data[i].images.path_name+'"/></div>';
		                    	}else{
		                    		str += '<img src="../../images/user-photo.png"/></div>';
		                    	}
		                    	str +=  '<div class="divcenter"><span id="">'+
		                    	res.data.data[i].username +'     '+ res.data.data[i].job_number +
		                    	'</span><span id="">'+
		                    	res.data.data[i].phone+
		                    	'</span></div>'+
		                    	'<div class="divright" onclick="recover('+res.data.data[i].id+')">'+
		                    	'恢复</div>'+
								'</div></li>';
					}
					str += "</ul>"
					g("item2").innerHTML = str;
				})
			}
			function del(yid){
				console.log(yid)
				var data = {
					url:"/api/employee/sdel",
					data:{
						access_token:acctoken(),
						id: parseInt(yid)
					}
				}
				ajax(data,function(res){
					getitem1();
					getitem2();
				});
			}
			function recover(id){
				console.log(id);
				var btnvalue = ["否","是"];
				mui.confirm("是否确认恢复员工？","",btnvalue,function(e){
					console.log(e.index);
					if(e.index == 1){
						var data = {url:"/api/employee/recover",data:{access_token:acctoken(),id:id}}
						ajax(data,function(res){
							getitem1();
							getitem2();
						});
					}
				})
			}
			function gopage(url){
				mui.openWindow({
				    url: url +'.html', 
				    id: url
				 });
			}
			
			function gosetemp(mid){
				mui.openWindow({
				    url:'setemployees.html?mid='+mid, 
				    id: 'setemployees',
				 });
				
			}
			
			
			function onshow(){
				getitem1();
			}
		</script>
	</body>

</html>